const path = require('path');
const webpack =require('webpack');
const baseConfig = require('./webpack.base');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
const devConfig = {
    mode: 'development',
    entry: baseConfig.entry,
    output: {
        path: path.resolve(__dirname, '../dist/src'),
        filename: "[name].[hash:8].bundle.js",
        publicPath: '/', // 确保资源在服务器能在根域名下正确访问
    },
    module: baseConfig.module,
    resolve: baseConfig.resolve,
    devtool: 'inline-source-map', // 将打包后的代码映射到原始代码，方便找出错误信息
    plugins: [
        ...baseConfig.plugins,
        new webpack.NamedModulesPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './index.html',
            inject: true,
            minify: {
                removeComments: true,
                collapseWhitespace: true,
                removeAttributeQuotes: false
            }
        }),
        //这个主要是将生成的vendor.dll.js文件加上hash值插入到页面中。
        new AddAssetHtmlPlugin([
            {
                filepath: path.resolve(__dirname,'../dist/plugins/vueplugin.dll.js'),
            },
            {
                filepath: path.resolve(__dirname,'../dist/plugins/elementuiplugin.dll.js'),
            }
        ]),
        new CleanWebpackPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ],
    optimization: baseConfig.optimization,
    devServer: {
        contentBase: path.resolve(__dirname + '../dist'),
        host: '127.0.0.1',
        port: '9090',
        hot: true,
        inline: true,
        historyApiFallback: {
            index: '/index.html'//index.html为当前目录创建的template.html
        }
        // open: true,
    }
};
module.exports = devConfig;
